<!--
 * @Description:表格的操作
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-03 22:43:01
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>表格的操作</title>
	<style>
		#div input.active {
			background: yellow;
		}

		#divmo {
			width: 200px;
			height: 200px;
			background: #F1F1F1;
		}

		#divmo>div {
			display: none;
			width: 100%;
			height: 200px;
		}

		#divmo>div:first-child {
			display: block;
		}
	</style>
	<script>
		//tBodies 可以多个 tHead tFoot 是元素 只能一个
		window.onload = function () {
			let otab = document.getElementById("tab1")
			let obtn = document.getElementById("bt1")
			let oname = document.getElementById("names")
			let oage = document.getElementById("ages")
      var id=otab.tBodies[0].rows.length + 1

			// var otd = document.createElement('td')
			// otd.innerHTML = '<a href="javascript:;">删除</a>'
			// otr.appendChild(otd)
			// let s = otab.tBodies[0].rows[0].cells[1].innerHTML
			obtn.onclick = function () {
				//  增加
				var otr = document.createElement('tr')
				var otd = document.createElement('td');
				otd.innerHTML = id++
				otr.appendChild(otd)
				var otd = document.createElement('td')
				otd.innerHTML = oname.value
				otr.appendChild(otd)
				var otd = document.createElement('td')
				otd.innerHTML = oage.value
				otr.appendChild(otd)
				var otd = document.createElement('td')
				otd.innerHTML = '<a href="javascript:;">删除</a>'
				otr.appendChild(otd)
				// 删除v
				otd.getElementsByTagName('a')[0].onclick = function () {
					otab.tBodies[0].removeChild(this.parentNode.parentNode)
				}
				otab.tBodies[0].appendChild(otr)


			}


		}
	</script>
</head>

<body>
	<div>
		tBodies 可以多个&nbsp; tHead tFoot 是元素 只能一个 <br>
		tBodies rows cells tHead tFoot
	</div>
	姓名：<input id="names" type="text">
	年龄：<input id="ages" type="text">
	<button id="bt1">添加</button>
	<table id="tab1" border="1" width="500">
		<thead>
			<tr>
				<td>ID</td>
				<td>姓名</td>
				<td>年龄</td>
				<td>操作</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>20</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>22</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>3</td>
				<td>王五</td>
				<td>18</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>4</td>
				<td>王麻子</td>
				<td>22</td>
				<td>操作</td>
			</tr>
		</tbody>
	</table>

</body>

</html>